<template>
    <div class="header">
        <img :src="state.headPortrait" />
        <div class="basic_info">
            <div class="basic_info_item">
                <div class="label">
                    名称
                </div>
                <div class="val">
                    {{ state.name }}
                </div>
            </div>
            <div class="basic_info_item">
                <div class="label">
                    手机号
                </div>
                <div class="val">
                    {{ state.phone }}
                </div>
            </div>
            <div class="basic_info_item">
                <div class="label">
                    部门
                </div>
                <div class="val">
                    {{ state.deptName }}
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import { ref, reactive,onMounted } from "vue"

import { getUserDetail } from '@/api/common/common'

const state = reactive({
    name: undefined,
    headPortrait: '/images/def_head_portrait.jpeg',
    deptName: undefined,
    phone: undefined,
})

onMounted(() => {
    info()
})

const info = () => {
    getUserDetail().then(data => {
        state.name = data.name
        state.phone = data.phone
        state.deptName = data.deptName
        if(data.headPortrait){
            state.headPortrait = data.headPortrait
        }
        
    })
}



</script>
<style scoped lang="scss">
.header {
    display: flex;

    img {
        height: 200px;
        width: 140px;
        border-radius: 5px;
    }

    .basic_info {
        display: flex;
        justify-content: space-evenly;
        flex-direction: column;
        margin-left: 20px;

        .basic_info_item {
            display: flex;
            align-items: center;
            .label {
                font-size: 20px;
                width: 100px;
            }

            .val {
                font-size: 24px;
                font-weight: bold;
                margin-left: 10px;
            }
        }
    }
}
</style>
